<template>
  <div id="member" class="wrapper-fixed">
    <div class="action-bar-wrapper">

      <el-col :span="24" class="action-bar">
        <el-input v-model="searchText" placeholder="用户昵称或手机号" style="width:300px;margin-right:20px"></el-input>
        <el-select v-model="authStatusOption" clearable placeholder="认证状态" style="margin:0 20px;">
          <el-option
            v-for="item in authStatusOptionsSearch"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" size="medium" @click="search">检索</el-button>
        <!-- <el-button type="primary" size="medium" @click="addStaffVisible=true">添加</el-button> -->
      </el-col>
    </div>

    <!-- 列表 -->
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="realname"
        label="姓名"
        width="100">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机"
        width="120"
      >
      </el-table-column>
      <el-table-column
        label="认证状态"
        width="100"
      >
        <template slot-scope="scope" v-if="scope.row.personal_auth_info">
          <div>
            <el-tag type="info" v-if="scope.row.personal_auth_info.is_auth!=1">注销</el-tag>
            <el-tag type="success" v-if="scope.row.personal_auth_info.is_auth==1">正常</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="提交时间"
        show-overflow-tooltip
        width="180"
      >
        <template slot-scope="scope" v-if="scope.row.personal_auth_info">
          <div>
            {{scope.row.personal_auth_info.created_at}}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="审核人"
        show-overflow-tooltip
        width="150"
      >
        <template slot-scope="scope" v-if="scope.row.personal_auth_info">
          <div>{{scope.row.personal_auth_info.operator==null?'无':scope.row.personal_auth_info.operator}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="审核时间"
        label="审核时间"
        show-overflow-tooltip
        width="180"
      >
        <template slot-scope="scope" v-if="scope.row.personal_auth_info">
          <div>
            {{scope.row.personal_auth_info.auth_time}}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width='300'>
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="showEditorVislble(scope.row)">编辑</el-button>
          <el-button type="primary" size="mini" @click="showConsultationVisible(scope.row)">认证资料</el-button>
          <el-button type="danger" size="mini" @click="deleteStaff(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-col :span="24" class="footer-bar">
      <div class="page-code">
        <el-pagination
          background
          :page-size="16"
          layout="prev, pager, next"
          :total="totalPage"
          @current-change="pageChange"
        >
        </el-pagination>
      </div>
    </el-col>
    <!-- 列表end -->


    <!-- 认证资料 -->
    <el-dialog title="认证资料" :visible.sync="consultationVisible" @close="initData">

      <el-form :label-position="'left'" label-width="150px">

        <!-- <el-form-item label="头像" >
            <div> <img src="https://ciy.oss-cn-shenzhen.aliyuncs.com//web/bibiji/2020/2/12/ededff219ce3963a786cc3047944a444.jpg" alt="" style="width:60px;border-radius:50%;height:60px;object-fit:cover"></div>
        </el-form-item> -->
        <el-form-item label="姓名">
          <div>{{consultationDetail.realname}}</div>
        </el-form-item>
        <el-form-item label="手机">
          <div>{{consultationDetail.phone}}</div>
        </el-form-item>
        <el-form-item label="身份证">
          <div>{{consultationDetail.personal_auth_info.id_card}}</div>
        </el-form-item>
        <el-form-item label="单位名称">
          <div>{{consultationDetail.personal_auth_info.unit_name}}</div>
        </el-form-item>
        <el-form-item label="岗位">
          <div>
            {{consultationDetail.personal_auth_info.job}}
          </div>
        </el-form-item>
        <el-form-item label="在职证明">
          <div>
            <el-image
              style="width: 200px; height: 200px"
              :fit="'contain'"
              :src="consultationDetail.personal_auth_info.work_img_url"
              :preview-src-list="[consultationDetail.personal_auth_info.work_img_url]">
            </el-image>
            <!-- <img :src="consultationDetail.unit_auth_info.license_img_url" alt="" style="max-width:300px"> -->
          </div>
        </el-form-item>
        <el-form-item label="认证状态">
          <div>
            <el-tag type="info" v-if="consultationDetail.personal_auth_info.is_auth!=1">注销</el-tag>
            <el-tag type="success" v-if="consultationDetail.personal_auth_info.is_auth==1">正常</el-tag>
          </div>
        </el-form-item>
        <el-form-item label="提交时间">
          <div>{{consultationDetail.personal_auth_info.created_at}}</div>
        </el-form-item>
        <el-form-item label="审核人">
          <div>{{consultationDetail.personal_auth_info.operator}}</div>
        </el-form-item>
        <el-form-item label="审核时间">
          <div>{{consultationDetail.personal_auth_info.updated_at}}</div>
        </el-form-item>


      </el-form>
    </el-dialog>
    <!-- 认证资料end -->

    <!-- 编辑资料 -->
    <el-dialog title="编辑资料" :visible.sync="editorVisible" @close="initData">

      <el-form :label-position="'left'" label-width="100px">

        <!-- <el-form-item label="头像" >
            <div> <img src="https://ciy.oss-cn-shenzhen.aliyuncs.com//web/bibiji/2020/2/12/ededff219ce3963a786cc3047944a444.jpg" alt="" style="width:60px;border-radius:50%;height:60px;object-fit:cover"></div>
        </el-form-item> -->
        <el-form-item label="姓名">
          <el-input v-model="member.name" style="width:200px"></el-input>
        </el-form-item>
        <el-form-item label="认证状态">
          <el-select v-model="member.authStatus" clearable placeholder="认证状态">
            <el-option
              v-for="item in authStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editUnitEmployeeInfo">保存</el-button>
      </div>
    </el-dialog>
    <!-- 编辑资料end -->


  </div>
</template>
<script>
  export default {
    name: 'member',
    data() {
      return {
        consultationVisible: false,//认证资料弹窗
        addStaffVisible: false,//添加弹窗状态
        editorVisible: false,//申请编辑弹窗
        searchText: '',
        userAuthId: '',//选中的用户id

        vipList: [],
        executor: '',
        loading: false,

        authStatusOption: '',//头部筛选认证状态
        authStatusOptionsSearch: [
          {label: '全部', value: -1},
          {label: '正常', value: 1},
          {label: '注销', value: 3}

        ],

        authStatusOptions: [
          {label: '正常', value: 1},
          {label: '注销', value: 3}

        ],
        member: {//编辑信息
          name: '',
          authStatus: '',
          id: ''
        },

        consultationDetail: {personal_auth_info: {}},
        tableData: [{}],
        page: 1,
        totalPage: 0
      }
    },
    watch: {},
    methods: {
      search() {
        this.page = 1;
        this.getUnitEmployeeList()
      },
      async getUnitEmployeeList() {
        let params = {
          page: this.page,
          limit: 16,
          id: this.id,
          keyword: this.searchText,
          is_auth: this.authStatusOption == -1 ? '' : this.authStatusOption
        }
        let res = await this.$api.getUnitEmployeeList(
          params);
        if (res.data.level == 'success') {
          this.tableData = [];
          this.tableData = res.data.data;
          this.totalPage = res.data.page_info.total;
        }
      },
      async editUnitEmployeeInfo() {
        //编辑员工信息
        let params = {
          realname: this.member.name,
          status: this.member.authStatus,
          id: this.member.id
        }
        let res = await this.$api.editUnitEmployeeInfo(params)
        if (res.data.level == 'success') {
          this.$message({
            type: 'success',
            message: res.data.message
          })
          this.editorVisible = false
          this.getUnitEmployeeList()
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      },
      pageChange(e) {
        //翻页
        this.page = e;
        this.getUnitEmployeeList();
      },
      async deleteStaff(id) {
        //删除
        let judge = null;
        let tit = '删除该员工?';
        try {
          judge = await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge = 'cancel'
        }
        if (judge == 'confirm') {
          this.delUnitEmployee(id)
        }
        console.log(judge)
      },
      async delUnitEmployee(id) {
        let res = await this.$api.delUnitEmployee({id: id})
        if (res.data.level == 'success') {
          this.$message({
            type: 'success',
            message: res.data.message
          })
          this.editorVisible = false
          this.getUnitEmployeeList()
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      },

      showCertification() {
        //新增
        this.addStaffVisible = true
      },
      showEditorVislble(scope) {
        //编辑申请资料弹窗
        this.member.name = scope.realname;
        this.member.authStatus = +scope.personal_auth_info.is_auth;
        this.member.id = scope.id;
        this.editorVisible = true
      },
      showConsultationVisible(scope) {
        //申请资料弹窗
        this.consultationDetail = scope
        this.consultationVisible = true
      },
      setCircleAdmin() {

      },
      toCustomer_detail(id) {
        this.$router.push({name: 'Customer_detail', query: {id: id}})
      },
      initData() {
        this.member = this.$options.data().member;
      }

    },
    mounted() {
      this.id = this.$route.query.id
      this.getUnitEmployeeList()
    },
  }
</script>
<style lang="scss" scoped>
  .screen {
    margin-top: -10px !important;
  }

  .action-bar-wrapper {
    position: sticky;
    z-index: 1;
    top: -10px;
  }

  .action-bar {
    background-color: #f2f2f2;

    height: 60px;
    margin: 10px 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 20px;

    .action-bar-input {
      width: 250px;
      margin-right: 14px;
    }

    .task-form-text {
      color: #666666;
    }
  }

  .el-table-style {
    width: 100%;
    border: 1px solid #f2f2f2;
  }

  .footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;
    padding: 8px;
    margin: 10px 0px;
    box-sizing: border-box;
  }

  .dialog-footer {
    text-align: center;
  }

  .executorList {
    display: flex;
    flex-wrap: wrap;

    div {
      margin: 10px;
      border: 1px solid #eee;
      border-radius: 5px;
      padding: 5px 10px;
    }
  }
</style>
